@extends('common')

@section('content')
    <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
@endsection

@section('layer')
    <div id="formData" style="display: none">
        <form class="layui-form" style="margin: 20px 20px 0 0">
            <div class="layui-form-item">
                <label class="layui-form-label">班级名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="class_name" required  lay-verify="required" placeholder="请输入班级名称" class="layui-input">
                </div>
            </div>
            {{ csrf_field() }}
            <input type="hidden" name="id" id="id">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button class="layui-btn layui-btn-primary layui-close">取消</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table', 'layer', 'jquery', 'form'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;

            table.render({
                elem: '#dataTable'
                ,url:"{{ route('class-list') }}"
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: []
                ,title: '班级'
                ,cols: [[
                    {field:'id', title:'ID', fixed: 'left'}
                    ,{field:'name', title:'班级名称', edit: 'text'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
            });

            //头工具栏事件
            table.on('toolbar(dataTable)', function(obj){
                switch(obj.event){
                    case 'add':
                        $('#class_name').val('');
                        $('#id').val('');
                        form.render('input', 'name');
                        layer.open({
                            'type': 1,
                            'title': '添加',
                            'content': $('#formData'),
                        })
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(dataTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('确定删除吗？', function () {
                        $.ajax({
                            type: "delete",
                            url: "{{ route('class') }}",
                            data: {'id':data.id, '_token':"{{ csrf_token() }}"},
                            dataType: "json",
                            success: function(res){
                                layer.closeAll();
                                window.location.reload();
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    $('#class_name').val(data.name);
                    $('#id').val(data.id);
                    form.render('input', 'name');
                    layer.open({
                        'type': 1,
                        'title': '修改',
                        'content': $('#formData'),
                    })
                }
            });

            $('.layui-close').on('click', function () {
                layer.closeAll();
            })

            //监听提交
            form.on('submit(formDemo)', function(data){
                if (!data.field.id) {
                    $.post("{{ route('class') }}", data.field, function (res) {
                        layer.msg(res.msg);
                        if (res.code === 0) {
                            setTimeout(function () {
                                window.location.reload();
                            }, 1500);
                        }
                    })
                } else {
                    $.ajax({
                        type: "put",
                        url: "{{ route('class') }}",
                        data: data.field,
                        dataType: "json",
                        success: function(res){
                            layer.msg(res.msg);
                            if (res.code === 0) {
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1500);
                            }
                        }
                    });
                }
                return false;
            });
        });
    </script>
@endsection
